<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019/10/18
  Time: 0:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> -->
    <title>Document</title>

    <link rel="stylesheet" href="${path}/css/traveler/swiper/swiper.min.css" type="text/css">

    <link rel="stylesheet" href="${path}/css/traveler/traveler_list.css">


</head>

<body>



<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">

        <c:forEach items="${requestScope.userTables}" var="n">
            <div class="swiper-slide">
                <a href="${path}/travelerInfoDis/travelerInfo?id=${n.id}">
                    <div class="card middle">
                            <%--<!-- 正面页面${n.headImg} -->--%>
                        <div class="front"
                             style="background-image: url(${n.headImg});background-repeat: no-repeat;
                                     background-size: 100% 100%;
                                     -moz-background-size: 100% 100%;">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;${n.username}&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img src="${n.headImg}" class="img-circle headerImg2" style=" width: 100px;height: 100px;">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;${n.username}&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                    style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:70%;height:50px;z-index:2;left:15%;top:65%;">
                                <font size="1px" color="black">${n.intro}</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </c:forEach>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

<!-- Swiper JS -->
<script src="${path}/js/traveler/swiper/swiper.min.js"></script>
<script src="${path}/H+/js/content.js"></script>
<%--达人展示滑动js--%>
<script src="${path}/js/traveler/swiper/swiper-container.js"></script>

<%--<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->--%>
<%--<script src="${path}/plugins/jquery/jquery.min.js"></script>--%>
<%--<!--引入bootstrap的js文件-->--%>
<%--<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>--%>

</body>
</html>

